import React from 'react';
import ReactDOM from 'react-dom';
import { Card, WingBlank, WhiteSpace } from 'antd-mobile';
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import LocalStore from '../../util/localStore'

import * as FristPageAction from '../../actions/FristPage'


import { getFirstPage } from '../../fetch/CardList/CardList'

class CardList extends React.Component {

    constructor(props, context) {
        super(props, context);
        this.state = {
        }
    }


    render() {
      //  console.log(JSON.stringify(this.props.reward));
        // var jsonstr =JSON.stringify(this.props.reward);
        // let jsonarr=JSON.parse(jsonstr);
      let arr2 = Array.from(this.props.reward); // ['a', 'b', 'c']
      console.log(JSON.stringify(arr2));
      arr2.map(function (item){
        console.log(item)
      })
        return (


            <div>
                <WhiteSpace size="md" />
                {

                       arr2.map(function (item) {
                           return (
                             <WingBlank size="md" key= {item.givingId}>

                               <Card>
                                 <Card.Header
                                   title={item.title}
                                   thumb={item.imgUrl}
                                   extra={<span>捐献者 ：{item.tails.showName}</span>}
                                   thumbStyle={{width:"100px"}}
                                 />
                                 <Card.Body>
                                   <div>{item.bookDesc}</div>
                                 </Card.Body>
                                 <Card.Footer content="footer content" extra={<div>extra footer content</div>} />
                               </Card>

                             </WingBlank>



                           )})
                   }
                <WhiteSpace size="md" />
            </div>
        )
    }



    // 获取首页数据
    loadFirstPageData() {

        const result = getFirstPage()
        this.resultHandle(result)
    }


    // 处理数据
    resultHandle(result) {
        result.then(res => {
            return res.json()
        }).then(json => {

            const data = json.data

            this.props.FristPageAction.getPageDate(data);
        }).catch(ex => {

        })
    }

    //数据初始化
    componentDidMount() {

      this.loadFirstPageData();
        // // 模拟登陆
        // this.props.FristPageAction.getPageDate( {
        //     reward:
        //     [
        //             {
        //                 "givingId": 3,
        //                 "title": "书的名字",
        //                 "bookDesc": "测试数据，这是一本书谁都得不到",
        //                 "imgUrl": "http://202.106.78.3:10001/api-common/file/20171102/filename?flname=70d103e0db85420da5df67dccbf07820_image-png.png",
        //                 "userId": 11,
        //                 "status": 0,
        //                 "userImId": "consumer11",
        //                 "profitUserId": null,
        //                 "profitUserImId": null,
        //                 "reportDualDesc": null,
        //                 "addressInfo": "这是个地址",
        //                 "lat": null,
        //                 "lon": null,
        //                 "addressId": null,
        //                 "pubTimie": "2017-11-02 16:53:37",
        //                 "updateTime": "2017-11-02 16:53:37",
        //                 "isbn": null,
        //                 "tails": {
        //                     "showName": "柴浩伟",
        //                     "avatar": null,
        //                     "bookHomeDesc": "啦啦啦"
        //                 }
        //             },
        //             {
        //                 "givingId": 2,
        //                 "title": "书的名字",
        //                 "bookDesc": "测试数据，这是一本书谁都得不到",
        //                 "imgUrl": "http://202.106.78.3:10001/api-common/file/20171102/filename?flname=d6a0f4ec036f45bba0e98b8fdc170912_image-png.png",
        //                 "userId": 11,
        //                 "status": 0,
        //                 "userImId": "consumer11",
        //                 "profitUserId": null,
        //                 "profitUserImId": null,
        //                 "reportDualDesc": null,
        //                 "addressInfo": "这是个地址",
        //                 "lat": null,
        //                 "lon": null,
        //                 "addressId": null,
        //                 "pubTimie": "2017-11-02 16:53:07",
        //                 "updateTime": "2017-11-02 16:53:07",
        //                 "isbn": null,
        //                 "tails": {
        //                     "showName": "柴浩伟",
        //                     "avatar": null,
        //                     "bookHomeDesc": "啦啦啦"
        //                 }
        //             }
        //         ]
        // })
    }

  }

// -------------------redux react 绑定-------------------- mapStateToProps 当前页面所需要的值

//订阅state 变化
function mapStateToProps(state,ownProps) {
  //  console.log(JSON.stringify(state.firstPage));
    var jsonArr = [];

    if(state.firstPage!=null){
      jsonArr=state.firstPage
        //jsonArr.add(state.firstPage)
    }


    return {
          reward :jsonArr
    }
}

function mapDispatchToProps(dispatch) {
  return {
      FristPageAction: bindActionCreators(FristPageAction, dispatch)
  }
}
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(CardList)
